// 引入一个包
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
// webpack配置信息都应该
module.exports = {
    mode: "development",
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在的目录位置
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    // 告诉webpack是否使用时箭头函数
    // environment: {
    //     arrowFunction: false,
    //     const: false
    // }, 
    // 指定webpack打包时候要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            // test指定这个规则生效的文件
            // babel-loader
            {
                test: /\.ts$/, 
                use: [
                    // 配置babel的信息 用做兼容性的处理功能是十分强大的
                    {
                        loader: "babel-loader",
                        options: {
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // targets: {
                                        //     // 要兼容浏览器的版本
                                        //     "chrome:": "88"
                                        // },
                                        // 指定corejs的版本 corejs是处理哪些浏览器没有的东西，从corejs中引入进去
                                        "corejs": "3",
                                        // 使用corejs的方式 "usage"表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]

                        }
                    },
                    "ts-loader"
                ],
                 // 要排除的文件
                 exclude: /node_modules/
            },
            {
                // 设置Less文件的处理 loader从下往上执行
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    // 用于兼容性 引入postcss
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers: "last 2 versions"
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            },
        ]
    },
    plugins: [
        // 插件的作用：自动生成对应的html文件，然后将对应Js文件都会引用到这个文件中
        new HTMLWebpackPlugin({
            // title: "这是自定义的title",
            // template将指定文件这是为打包以后的文件
            template: "./src/index.html"
        }),
        // 该插件效果是每次打包之前把上一个打包好的文件给删除
        new CleanWebpackPlugin(),
    ],
    // 用来告诉webpack哪些文件是可以作为模块使用
    resolve: {
        extensions: [".ts", ".js"]
    }
}